<template>
  <div>
    <div>
      <div class="starBox">
        <ul class="grayStar">
          <li><img src="../../assets/OIP-C (1).jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C (1).jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C (1).jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C (1).jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C (1).jpg" alt="" /></li>
        </ul>
        <ul class="yellowStar" :style="{ width: num  + 'rem' }">
          <li><img src="../../assets/OIP-C.jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C.jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C.jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C.jpg" alt="" /></li>
          <li><img src="../../assets/OIP-C.jpg" alt="" /></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["num"],
  data() {
    return {
    };
  },
   mounted() {
  },
};
</script>
<style scoped>
ul {
  margin-bottom: 20px;
}

.starBox li {
  width: 5rem;
  height: 5rem;
}
.starBox li img {
  width: 1rem;
  height: 1rem;
}
.starBox {
  position: relative;
}
.grayStar {
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
}
.yellowStar {
  height: 5rem;
  width: 5rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
</style>
